<template>
  <div class="vip-wrap">
    <van-nav-bar
      left-arrow
      fixed
      @click-left="$router.go(-1)"
      style="background-color: rgba(0,0,0,0);"
      :border="false"
    >
      <span slot="title" style="color:#eee">会员通道</span>
    </van-nav-bar>
    <div class="header-wrap relative">
      <div class="header p-xl absolute fs-l">
        <p>每日学习</p>
        <p>解锁200+精品课程 邀请好友赚钱</p>
      </div>
    </div>
    <div class="container p-xl">
      <span>会员套餐</span>
      <div class="plank-wrap dg  m-t-xl">
        <div
          v-for="(item, index) in vipData"
          :key="index"
          @click="changeInput(index)"
          :class="item.checked ? 'plank p-l checked' : 'plank p-l'"
        >
          <span class="fs-l">{{ item.title }}</span>
          <p style="color:rgb(194,127,23)" class="fs-xxl">
            {{ item.money | money }}
          </p>
          <ul style="color:rgb(194,127,23)">
            <li class="fs-xs" v-for="(info, i) in item.info" :key="i">
              {{ info }}
            </li>
          </ul>
        </div>
      </div>
      <van-button
        class="m-t-l"
        color="linear-gradient(to right, rgb(250,221,177), rgb(219,187,136))"
        block
        >立即开通{{
      }}</van-button>
    </div>
    <div class="container p-xl">
      <span>会员权限</span>
      <p>
        <span v-for="(item, index) in good" :key="index">{{ item }}</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Vip",
  data() {
    return {
      vipData: [
        {
          title: "普通会员",
          money: "9.9",
          info: ["视频随心看", "10个邀请名额"],
          checked: true
        },
        {
          title: "白金会员",
          money: "299",
          info: ["视频随心看", "300个邀请名额"],
          checked: false
        }
      ],
      checkedMoney: null,
      good: ["专属课程", "无限视频", "名额邀请", "专属优惠", "会员活动"]
    };
  },
  created() {
    this.checkedMoney = this.vipData[0].money;
  },
  methods: {
    changeInput(e) {
      this.vipData.forEach(item => {
        item.checked = false;
      });
      this.vipData[e].checked = true;
      this.checkedMoney = this.vipData[e].money;
    }
  }
};
</script>
<style lang="scss" scoped>
.vip-wrap {
  .header-wrap {
    height: 15.3846 * $size;
    background-color: $dark;
    .header {
      bottom: 0;
      left: 1.1538 * $size;
      right: 1.1538 * $size;
      min-height: 8.4615 * $size;
      background: rgb(251, 222, 178);
      border-top-left-radius: 0.6154 * $size;
      border-top-right-radius: 0.6154 * $size;
    }
  }
  .plank-wrap {
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 0.7692 * $size;
    .plank {
      border-radius: 4px;
      border: 1px solid rgb(219, 187, 136);
    }
  }
}
.checked {
  background-color: rgb(251, 236, 215);
}
</style>
